<template>
    <div class="header clearfix">
        <div class="fl">
            <img src="@/assets/images/logo.png" alt="" />
        </div>
        <div class="user fl">
            <p class="user_name">
                <span>用户名：</span>
                <span>{{ userInfo.nickname }}</span>
            </p>
            <br />
            <p class="user_id">
                <span>用户ID：</span>
                <span>{{ userInfo.uid }}</span>
            </p>
        </div>
    </div>

    <div class="user-tools">
        <van-cell title="退出登录" is-link @click="loginOut" />
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Dialog, Notify } from "vant";
import { getToken } from "../../utils/auth";
export default defineComponent({
    setup() {
        const store = useStore();
        const router = useRouter();
        const loginOut = () => {
            Dialog.confirm({
                message: "确定退出登录"
            })
                .then(async () => {
                    await store.dispatch("user/A_loginOut");
                    Notify({ type: "success", message: "退出登录成功" });
                    router.replace("/");
                    window.location.reload();
                })
                .catch(() => {});
        };
        onMounted(() => {
            const hasToken: any = getToken();
            if (hasToken) {
                const userInfo: any = localStorage.getItem("userInfo");
                store.commit(
                    "user/M_setInfo",
                    userInfo ? JSON.parse(userInfo) : {}
                );
            }
        });
        return {
            userInfo: computed(() => store.getters.userInfo),
            loginOut
        };
    }
});
</script>

<style lang="scss" scoped>
.header {
    background-color: #ea625b;
    height: 120px;
    border-radius: 0% 0% 100% 100%/0% 0% 16% 16%;
    padding: 30px 10px;
    img {
        width: 60px;
        height: auto;
    }
    .user {
        height: 100%;
        color: #fff;
        margin-left: 20px;
        &_name {
            font-size: 20px;
        }
        &_id {
            margin-top: 5px;
        }
    }
}
</style>
